<template>
  <div class="shuju">
    <ConTitle :topTitle="topTitle"/>
    <gailan :flag="flag"/>

    <el-card class="box-card shebei_bottom" v-for="(i,key) in sensorList" :key="Math.random()+key">
      <div slot="header" class="clearfix bottom_top">
        <span>{{key}}</span>
      </div>
      <div class="bottom_bottom">
        <div class="box" v-for="item in i" :key="item.id">
          <div v-if="item.online==true" class="img2"><i class="iconfont icon-yalichuanganqi" v-if="item.online==true" :style="{color:'#3dd93d'}"></i></div>
          <div v-if="item.online==false" class="img2"><i class="iconfont icon-yalichuanganqi" v-if="item.online==false" :style="{color:'#808080'}"></i></div>
          <div class="num">{{item.devValue}}</div>
          <div>{{item.devName}}</div>
          <div class="hui">EUI{{item.eui}}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
//引入组件
import ConTitle from "@/components/ConTitle";
import gailan from "@/components/gailan";
import {$deviceSensorList} from "@/api";

export default {
  name: "dashboarddata",
  data(){
    return {
      flag:false,
      sensorList:[],
      topTitle:{
        type:"",
        text:"设备列表",
        msg:"监控所有设备状态"
      },
    }
  },
  components:{
    gailan,ConTitle,
  },
  mounted() {
    $deviceSensorList().then(res => {
      //console.log(111,res.data.data);
      let dui = res.data.data;
      let newdui = {};
      for (let i in res.data.data) {
        if (dui[i] != ""){
          newdui[i] = dui[i];
        }
      }
      this.sensorList = newdui;
      //console.log(newdui);
    });
  },
}
</script>

<style scoped lang="scss">
.shebei_top {
  margin-bottom: 10px;
  .top_title {
    font-size: 18px;
    font-weight: bold;
  }
}
.shebei_bottom{
  margin-bottom: 10px;
}
.shebei_bottom .bottom_top span{
  font-size: 16px;
  font-weight: bold;
}
.shebei_bottom .bottom_bottom{
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .box{
    width: 13%;
    text-align: center;
    border: #f4f4f4 1px solid;
    margin: 5px;
    font-size: 14px;
    .num{
      font-size: 15px;
      font-weight: bold;
    }
    div{
      margin-top: 5px;
    }
  }
  .img2{
    transform: rotate(180deg);
    i{
      font-size: 38px;
    }
  }
  .hui{
    background: #f3f4f5;
  }
}
</style>